<template>
  <div class="Home">
    <a-row :gutter="30">
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>网点总数:</span>
              <span>{{branchCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>点位总数:</span>
              <span>{{posCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>设备总数:</span>
              <span>{{deviceCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <a-tabs type="card" style="margin-top:2%;">
      <a-tab-pane tab="今日数据" key="1">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单总数</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="昨日数据" key="2">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单总数</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="本月数据" key="3">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单总数</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-card style="margin-top:2%">
      <a-tabs defaultActiveKey="1">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="extra-item">
            <a>今日</a>
            <a>近七天</a>
            <a>近30天</a>
          </div>
          <a-range-picker :style="{width: '256px'}"/>
        </div>
        <a-tab-pane tab="代理商销售排行" key="1">
          <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip/>
            <v-axis data-key="type" :label="label" :tickLine="tickLine"></v-axis>
            <v-axis data-key="value" :label="labelFormat" :title="title"></v-axis>
            <v-interval position="type*value" color="cat" :opcaity="1"></v-interval>
            <v-guide
              type="text"
              :top="true"
              :position="pos1"
              content="家具"
              :style="style"
              :offsetY="40"
            />
            <v-guide
              type="text"
              :top="true"
              :position="pos2"
              content="技术"
              :style="style"
              :offsetY="40"
            />
            <v-guide
              type="text"
              :top="true"
              :position="pos3"
              content="办公用品"
              :style="style"
              :offsetY="40"
              :offsetX="20"
            />
            <v-guide type="line" :start="start1" :end="end1" :lineStyle="lineStyle"/>
            <v-guide type="line" :start="start2" :end="end2" :lineStyle="lineStyle"/>
          </v-chart>
        </a-tab-pane>
        <a-tab-pane tab="网点销售排行" key="2" forceRender>
          <pre>
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          </pre>
        </a-tab-pane>
        <a-tab-pane tab="品类销售排行" key="3">
          <pre>
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          </pre>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
const data = [
  {
    type: "书架",
    value: 48000,
    cat: "家具"
  },
  {
    type: "椅子",
    value: 36000,
    cat: "家具"
  },
  {
    type: "桌子",
    value: 9000,
    cat: "家具"
  },
  {
    type: "复印机",
    value: 30500,
    cat: "技术"
  },
  {
    type: "电话",
    value: 22000,
    cat: "技术"
  },
  {
    type: "配件",
    value: 12000,
    cat: "技术"
  },
  {
    type: "纸张",
    value: 25000,
    cat: "办公用品"
  },
  {
    type: "笔",
    value: 17000,
    cat: "办公用品"
  },
  {
    type: "美术",
    value: 8000,
    cat: "办公用品"
  },
  {
    type: "收纳",
    value: 2000,
    cat: "办公用品"
  }
];

const scale = [
  {
    dataKey: "value",
    alias: "占比（%）"
  }
];

const label = {
  textStyle: {
    fill: "#aaaaaa"
  }
};

const tickLine = {
  alignWithLabel: false,
  length: 0
};

const labelFormat = {
  textStyle: {
    fill: "#aaaaaa"
  },
  formatter: function formatter(text) {
    return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
  }
};

const title = {
  offset: 70
};

const lineStyle = {
  stroke: "#d9d9d9",
  lineDash: [0, 0]
};

const style = {
  fill: "#c0c0c0",
  fontSize: 12,
  fontWeight: "300",
  textAlign: "center"
};

export default {
  name: "Home",
  data() {
    return {
      branchCount: "",
      posCount: "",
      deviceCount: "",
      data,
      scale,
      height: 400,
      style,
      label,
      tickLine,
      labelFormat,
      title,
      lineStyle,
      pos1: ["椅子", "min"],
      pos2: ["电话", "min"],
      pos3: ["笔", "min"],
      start1: ["30%", "100%"],
      end1: ["30%", "120%"],
      start2: ["60%", "100%"],
      end2: ["60%", "120%"]
    };
  },
  components: {},
  methods: {
    // 设备概况统计
    deviceStats() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/homepage/deviceStats",
        data: {
          loginToken: this.$store.state.loginToken
        }
      }).then(res => {
        this.branchCount = res.data.data.branchCount;
        this.posCount = res.data.data.posCount;
        this.deviceCount = res.data.data.deviceCount;
      });
    }
  },
  created() {
    this.deviceStats();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.gutter-box .ant-card {
  transition: all 0s;
}
.gutter-box .ant-card:hover {
  box-shadow: 0 10px 10px rgb(207, 227, 246);
  transform: translateY(-5%);
}
.gutter-box .ant-card-body p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
}
.gutter-box .ant-card-body p span:nth-of-type(1) {
  font-size: 1.2em;
  color: black;
}
.gutter-box .ant-card-body p span:nth-of-type(2) {
  font-size: 2.5em;
  color: rgb(39, 39, 39);
}
.ant-tabs-bar {
  border-bottom: none;
}

.extra-wrapper {
  line-height: 40px;
  padding-right: 24px;
}
.extra-item {
  display: inline-block;
  margin-right: 24px;
}
a {
  margin-left: 24px;
}
</style>
